<!-- 如果不需要监听变更数据，就在父组件直接使用v-model:field="" -->
<template>
    <div class="">
        <van-field
            :model-value="field"
            @update:model-value="emits('update:field', $event)"
            :required="required"
            center
            is-link
            :readonly="true"
            :name="name"
            :label="label"
            :placeholder="label"
            :rules="[{ required: required, message: '请选择' + label }]"
            @click="!readonly ? (showPicker = true) : ''"
        />
        <van-popup v-model:show="showPicker" position="bottom" close-on-popstate round>
            <van-time-picker
                v-model="currentTime"
                title="选择时间"
                :columns-type="columnsType"
                :min-time="minTime"
                :max-time="maxTime"
                @confirm="onConfirm"
                @cancel="
                    showPicker = false;
                    emits('update:field', '');
                "
            />
        </van-popup>
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw } from 'vue';
    import type { Ref, Raw } from 'vue';
    // withDefaults(defineProps<{
    //     field?: any,
    //     name?: string,
    //     label?: string,
    //     columns?: any[],
    // }>(), {
    //     field: '',
    //     name: '',
    //     label: '',
    //     columns: () =>[],
    // })

    const currentTime: Ref<string[]> = ref([]);
    const {
        field,
        name,
        label,
        minTime = '00:00:00',
        maxTime = '23:59:59',
        columnsType = ['hour', 'minute'],
        readonly = false,
        required = false,
    } = defineProps<{
        field?: any;
        name?: string;
        label?: string;
        minTime?: any;
        maxTime?: any;
        columnsType?: any;
        readonly?: boolean;
        required?: boolean;
    }>();
    if (field) {
        field.split(':').forEach((item) => {
            currentTime.value.push(item);
        });
    } else {
        const date = new Date();
        columnsType.forEach((item) => {
            if (item == 'hour') {
                currentTime.value.push(date.getHours().toString());
            } else if (item == 'minute') {
                currentTime.value.push(date.getMinutes().toString());
            } else if (item == 'second') {
                currentTime.value.push(date.getSeconds().toString());
            }
        });
    }
    console.log(currentTime);
    const emits = defineEmits<{
        (e: 'update:field', data: any): void;
    }>();
    const showPicker: Ref<boolean> = ref(false);

    const onConfirm = ({ selectedValues, selectedOptions }) => {
        console.log(selectedValues);
        console.log(selectedOptions);
        let val = '';
        selectedValues.forEach((item, index) => {
            if (index == 0) {
                val = item;
            } else {
                val += ':' + item;
            }
        });
        emits('update:field', val);
        showPicker.value = false;
    };
</script>

<style lang="scss" scoped></style>
